<template>
  <div class="course-content">

    <!--    广告轮播图  -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="ad in activeAds"
        :key="ad.id"
      >
        <img :src="ad.img">
      </van-swipe-item>
    </van-swipe>

    <!--    课程列表  -->
    <div class="course-content-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadCourses"
        >
          <van-cell
            v-for="item in courses"
            :key="item.id"
            @click="handleClick(item)"
          >
            <img :src="item.courseImgUrl">
            <div class="course-info">
              <h3 v-text="item.courseName"></h3>
              <p class="info" v-text="item.previewFirstField"></p>
              <p class="price">
                <span>¥{{item.discounts}}</span>
                <span>¥{{item.price}}</span>
              </p>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
  import { getAllAds } from '@/services/ad'
  import { getQueryCourses } from '@/services/course'

  export default {
    name: 'CourseContent',
    data() {
      return {
        ads: [],
        courses: [],
        loading: false,
        finished: false,
        queryData: {
          currentPage: 1,
          pageSize: 10,
          status: 1,
        },
        refreshing: false,
      }
    },
    computed: {
      activeAds() {
        return this.ads.filter(ad => ad.status === 1)
      }
    },
    created() {
      this.loadAds()
    },
    methods: {
      async loadAds() {
        const { content } = await getAllAds({ spaceKeys: 999 })
        this.ads = content[0].adDTOList
      },
      async loadCourses() {
        const { content } = await getQueryCourses(this.queryData)
        if (this.refreshing) {
          this.courses = content.records
        } else {
          this.courses.push(...content.records)
        }

        this.loading = false
        this.refreshing = false
        if (this.queryData.currentPage * this.queryData.pageSize >= content.total) {
          this.finished = true
        }
        this.queryData.currentPage++
        console.log('current>>', this.queryData.currentPage)
      },
      onRefresh() {
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.finished = false
        this.loading = true
        this.queryData = {
          currentPage: 1,
          pageSize: 10,
          status: 1,
        }
        this.loadCourses()
      },
      handleClick(item) {
        this.$router.push({
          name: 'course-info',
          params: {
            courseId: item.id,
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-swipe {
    width: 100%;

    .van-swipe-item {
      overflow: hidden;
      display: flex;
      justify-content: center;
    }

    img {
      height: 170px;
    }
  }

  .course-content-list {
    position: fixed;
    top: 220px;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow-y: auto;

    .van-cell__value {
      display: flex;
      padding: 10px 0;

      img {
        width: 75px;
        height: 100px;
      }

      h3, p {
        margin: 0;
        padding: 0;
      }

      .course-info {
        height: 100px;
        padding: 0 10px;
        flex: 1;
        display: flex;
        flex-direction: column;

        .info {
          flex: 1;
        }

        .price {
          & :first-child {
            color: #ff7452;
            margin-right: 10px;
          }

          & :last-child {
            text-decoration: line-through;
          }
        }
      }
    }
  }
</style>
